<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(context, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            context.beginPath();
            context.moveTo(fromx, fromy);
            context.lineTo(tox, toy);
            context.stroke();
            context.beginPath();
            context.moveTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            context.moveTo(tox, toy);
            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            context.stroke();
        }

        // --- Start Drawing ---

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px serif';
        
        // --- Main Axes ---
        
        // Horizontal axis (x, x')
        const xAxisY = 170;
        const xAxisStartX = 50;
        const xAxisEndX = 450;
        drawArrow(ctx, xAxisStartX, xAxisY, xAxisEndX, xAxisY);
        ctx.fillText("x, x'", xAxisEndX, xAxisY - 10);

        // Stationary vertical axis (y)
        const yAxisX = 100;
        const yAxisStartY = 270;
        const yAxisEndY = 70;
        drawArrow(ctx, yAxisX, yAxisStartY, yAxisX, yAxisEndY);
        ctx.fillText("y", yAxisX - 20, yAxisEndY + 5);

        // --- Frames and Objects ---

        // Label for stationary frame Σ
        ctx.fillText("Σ", yAxisX, yAxisStartY + 25);

        // Moving mirror / y'-axis
        const mirrorX = 200;
        const mirrorTopY = 90;
        const mirrorBottomY = 250;
        ctx.beginPath();
        ctx.moveTo(mirrorX, mirrorTopY);
        ctx.lineTo(mirrorX, mirrorBottomY);
        ctx.stroke();

        // Label for y'
        ctx.fillText("y'", mirrorX - 20, mirrorTopY - 5);

        // Hatch marks for the mirror (back side)
        ctx.save();
        ctx.lineWidth = 1.5;
        const hatchLength = 10;
        for (let y = mirrorTopY + 10; y < mirrorBottomY; y += 15) {
            ctx.beginPath();
            ctx.moveTo(mirrorX, y);
            ctx.lineTo(mirrorX + hatchLength, y - hatchLength);
            ctx.stroke();
        }
        ctx.restore();

        // Label for moving frame Σ'
        ctx.fillText("Σ'", mirrorX, yAxisStartY + 25);


        // --- Vectors and Labels ---

        // Velocity vector (v)
        const vArrowY = 120;
        const vArrowStartX = 210;
        const vArrowEndX = 270;
        drawArrow(ctx, vArrowStartX, vArrowY, vArrowEndX, vArrowY);
        ctx.textAlign = 'center';
        ctx.fillText("v", (vArrowStartX + vArrowEndX) / 2, vArrowY - 10);

        // Light beam vector
        const lightArrowY = 150;
        const lightArrowStartX = 420;
        const lightArrowEndX = 320;
        drawArrow(ctx, lightArrowStartX, lightArrowY, lightArrowEndX, lightArrowY);
        ctx.textAlign = 'center';
        ctx.fillText("light", (lightArrowStartX + lightArrowEndX) / 2, lightArrowY - 10);

        // --- Caption ---
        ctx.fillText("Fig. 3.9.", canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>